<!DOCTYPE html>
<!-- 
  Copyright 2011 Google Inc. All Rights Reserved.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['corechart']});
    </script>
    <script type="text/javascript">
      var X_SIZE = 400;

      function append(arr1, arr2) {
        for (var i = 0; i < arr2.length; i++) {
          arr1.push(arr2[i]);
        }
      }

      function createLayer(baseValues, xStart, xEnd) {
        var yValue = baseValues[xStart];
        var result = [];
        for (var x = 0; x < X_SIZE; x++) {
          if (x < xStart || x > xEnd) {
            result.push(null);
          } else {
            result.push(yValue - baseValues[x]);
          }
        }
        return result;
      }

      function drawVisualization() {
        // Some raw data (not necessarily accurate)
        var layers =
          ['Base', 'Mercury', 'Venus', 'Earth', 'Moon', 'Mars', 'Ganyemede',
           'Io', 'Jupiter', 'Europa', 'Titan', 'Saturn', 'Uranus', 'Neptune'];
        var xPoints = [];
        for (var i = 0; i < X_SIZE; i++)
          xPoints.push('' + i);
        var yBaseValues = [0, 0, 0, 3.33, 6.66,
                           9.8, 10, 9.8, 9.1, 8.8, 9.1, 9.8, 10, // Mercury
                           15, 20, 25, 30, 35,
                           39.8, 40, 39.8, 37.5, 35.5, 35, 34.9, 35, 35.5, 37.5, 39.8, 40, //Venus
                           40.2, 41, 42, 43.333, 46.666,
                           49.8, 50, 49.8, 46.7, 44.7, 44.2, 44.1, 44.2, 44.7, 46.7, 49.8, 50, // Earth
                           50.5, 50.5, 50, 49.8, 49.1, 48.8, 49.1, 49.8, 50, // Moon
                           50.2, 51, 52, 53.33, 56.66,
                           59.8, 60, 59.8, 57.5, 56.5, 56.3, 56.5, 57.5, 59.8, 60,  // Mars
                           60, 62, 64, 68, 75, 76, 76.5, 76.7, 76.5, 76, 75, 74, 70,
                           67.5, 66.5, 66.3, 66.5, 67.5, 69.8, 70, // Ganymede
                           68.33, 66.66, 65,
                           64.1, 63.8, 64.1, 64.8, 65]; // Io
        // For point (100, 65) and minimum (150, 5) equation is:
        // y = 0.024X^2 - 7.2 X + 545
        x = 100;
        y = -1;
        do {
          y = 0.024 * x * x - 7.2 * x + 545;
          yBaseValues.push(y);
          x++;
        } while (y < 67.5);
        var lastValue = yBaseValues[yBaseValues.length - 1];
        append(yBaseValues, [67.5, 66.6, 66.3, 66.6, 67.5, // Europa
                             lastValue, 73, 76.666, 80,
                             80.5, 81, 81.2, 81,
                             80.8, 77.5, 76.5, 76.3, 76.5, 77.5, 80.8  // Titan
                            ]);
        // For point (224, 80) and minimum (268, 40) equation is:
        // y = 0.0206612X^2 - 11.0744 X + 1523.97
        for (var x = 224; x <= 312; x++) {
          y = 0.0206612 * x * x - 11.0744 * x + 1523.97;
          yBaseValues.push(y);
        }
        append(yBaseValues, [80.2, 80.3, 80.5, 80.5, 80.5, 80.7, 81, 82, 84, 84.8, 85]);
        // For point (324, 85) and minimum (339, 60) equation is:
        // y = 0.1111111X^2 - 75.3333333 X + 12829
        for (var x = 324; x <= 354; x++) {
          y = 0.1111111 * x * x - 75.3333333 * x + 12829;
          yBaseValues.push(y);
        }
        append(yBaseValues, [85.2, 85.6, 85.9, 86, 85.9, 85.6, 85.2]);
        // For point (362, 85) and minimum (377, 55) equation is:
        // y = 0.1333333X^2 - 100.5333X + 19005.53
        for (var x = 362; x <= 392; x++) {
          y = 0.1333333 * x * x - 100.5333 * x + 19005.53;
          yBaseValues.push(y);
        }
        append(yBaseValues, [85.2, 85.3, 85.5, 85.5, 85.5, 85.7, 86, 89]);
        var mercury = createLayer(yBaseValues, 7, 11);
        var venus = createLayer(yBaseValues, 21, 27);
        var earth = createLayer(yBaseValues, 38, 44);
        var moon = createLayer(yBaseValues, 50, 54);
        var mars = createLayer(yBaseValues, 63, 69);
        var ganymede = createLayer(yBaseValues, 83, 89);
        var io = createLayer(yBaseValues, 93, 97);
        var jupiter = createLayer(yBaseValues, 123, 175);
        var europa = createLayer(yBaseValues, 201, 207);
        var titan = createLayer(yBaseValues, 215, 221);
        var saturn = createLayer(yBaseValues, 236, 296);
        var uranus = createLayer(yBaseValues, 327, 347);
        var neptune = createLayer(yBaseValues, 365, 385);

        var yValues = [yBaseValues, mercury, venus, earth, moon, mars, ganymede,
                       io, jupiter, europa, titan, saturn, uranus, neptune];

        // Create and populate the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Layer');
        for (var i = 0; i < layers.length; i++) {
          data.addColumn('number', layers[i]);
        }
        data.addRows(xPoints.length);
        for (var i = 0; i < xPoints.length; i++) {
          data.setCell(i, 0, xPoints[i]);
        }
        for (var i = 0; i < layers.length; i++) {
          var layer = yValues[i];
          for (var x = 0; x < xPoints.length; x++) {
            data.setCell(x, i + 1, layer[x]);
          }
        }
        // Create and draw the visualization.
        var ac = new google.visualization.AreaChart(document.getElementById('visualization'));
        ac.draw(data, {
          title : 'Gravity Wells',
          isStacked: true,
          width: 800,
          height: 500,
          backgroundColor: '#000000',

          axisTitles: 'none',
          hAxis: {showTextEvery: 100, textStyle: {color: '#000000'}},
          vAxis: {textStyle: {color: '#000000'}, gridline:'none'},
          gridlineColor: '#000000',
          tooltipMode: 'none',
          legendTextStyle: {color: '#ffffff'},

          colors: ['#ffffff', '#674f49', '#4184a3', '#354aed', '#ebebeb', '#cb2b11', '#767676', '#ff7a00', '#efa351', '#477ffe', '#be8d6c', '#efa351', '#2f6b8e', '#2f6b8e']
        });
      }

      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="width: 800px; height: 500px;"></div>
  </body>
</html>
